<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">点击</button>
    <script>
        // 观察者模式：（自定义事件）
        // 发布订阅模式 也是观察者模式

        //    let btn =  document.querySelector(".btn");
        // //    btn.onclick = function(){
        // //        console.log("click");
        // //    }
        // // 事件绑定 事件监听 
        // // 1.延迟执行 2.一对多
        // btn.addEventListener("click",function(){
        //     console.log("点击了");
        // })
        // btn.addEventListener("click",function(){
        //     console.log("点击了11");
        // })
        // btn.addEventListener("click",function(){
        //     console.log("点击了222");
        // })
        // 触发事件


        // 自定义事件

        // let obj1 = {
        //     fn1:function(){
        //         console.log("执行了111");
        //     },
        //     fn2:function(){
        //         console.log("执行了222");
        //     },
        // }
        // let handler = {};
        // // 添加自定义事件绑定
        // function addEvent(eventName,fn){
        //     // 通过 handle 来保存下来，等到需要执行的时候在执行
        //     // {自定义事件名(click):[fn1,fn2,fn3...]}
        //     if(typeof handler[eventName] == "undefined"){
        //         // 把对象初始化成一个数组
        //         handler[eventName] = [];
        //         // {myevent:[fn,fn1,fn2]}
        //     }
        //     handler[eventName].push(fn)
        // }

        // // 写一个函数触发自定义事件
        // // 触发 ：把保存的函数 拿出来执行就可以了
        // function trigger(eventName){
        //     handler[eventName].forEach(fn=>{
        //         fn();
        //     })
        // }
        // // 绑定事件
        // addEvent("myevent",obj1.fn1);
        // addEvent("myevent",obj1.fn2);
        // // console.log(handler);
        // // addEvent("myevent",obj1.fn2);
        // document.onclick = function(){
        //     trigger("myevent"); // 执行事件
        // }



        // 会把自定义事件封装成类

        class MyEvent {
            constructor() {
                this.handler = {};
            }
            // 添加事件
            addEvent(eventName, fn) {
                // 通过 handle 来保存下来，等到需要执行的时候在执行
                // {自定义事件名(click):[fn1,fn2,fn3...]}
                if (typeof this.handler[eventName] == "undefined") {
                    // 把对象初始化成一个数组
                    this.handler[eventName] = [];
                    // {myevent:[fn,fn1,fn2]}
                }
                this.handler[eventName].push(fn)
            }
            trigger(eventName) {
                this.handler[eventName].forEach(fn => {
                    fn();
                })
            }
        }

        let obj1 = {
            fn1: function () {
                console.log("执行了111");
            },
            fn2: function () {
                console.log("执行了222");
            },
        }

        // let myevent = new MyEvent();
        // // 绑定事件
        // myevent.addEvent("myevnet",obj1.fn1);
        // myevent.addEvent("myevnet",obj1.fn2);
        // // 触发事件
        // document.onclick = function(){
        //     myevent.trigger("myevnet")
        // }
        // 回调地狱 
        // let myevent = new MyEvent();
        let myevent = new EventTarget();
        let num = 1;
        function fn(cb) {
            // return new Promise(resolve => {
                setTimeout(() => {
                    console.log("执行了");
                    // myevent.trigger("myevent"+num);
                    myevent.dispatchEvent(new CustomEvent("myevent"+num))
                    num++;
                    // if(cb){
                    //     cb();
                    // }
                    // cb && cb();
                    // resolve();
                }, 1000);
            // })
        }
        // 第一调用 会触发 myevnet1 自定义事件
        fn();
        
        // myevent.addEvent("myevent1",function(){
        //     console.log("event1");
        //     fn();  // 第二次调用 num --》2   调用 myevnet2 自定义事件
        // })

        // myevent.addEvent("myevent2",function(){
        //     console.log("event2");
        //     fn(); // 第三次调用 --->3  调用 myevnet3 自定义事件
        // })
        // myevent.addEvent("myevent3",function(){
        //     console.log("event3");
        //     console.log("所有的事件执行完毕");
        // })


        myevent.addEventListener("myevent1",function(){
            console.log("event1");
            fn();  // 第二次调用 num --》2   调用 myevnet2 自定义事件
        })

        myevent.addEventListener("myevent2",function(){
            console.log("event2");
            fn(); // 第三次调用 --->3  调用 myevnet3 自定义事件
        })
        myevent.addEventListener("myevent3",function(){
            console.log("event3");
            console.log("所有的事件执行完毕");
        })




        // fn().then(()=>{
        //     return fn();
        // }).then(()=>{
        //     return fn();
        // }).then(()=>{
        //     console.log("执行完毕了");
        // })
        // fn(function(){
        //     fn(function(){
        //         fn(function(){
        //             console.log("执行完了");
        //         })
        //     })
        // })



    </script>
</body>

</html>